<template>
    <div class="page-account">
        <div v-if="type === 1">
            <div class="page-account-containers" v-if="step === 1">
                <h2>找回密码</h2>
                <p>验证码将会发送至你手机</p>
                <div class="inputbox ivu-mt-16">
                    <Input v-model="params.mobile" placeholder="请输入手机号"></Input>
                </div>
                <Button @click="enterMobile" class="ivu-mt-16" type="primary" long :disabled="disabledBut">下一步</Button>
            </div>
            <div class="page-account-containers" v-else-if="step === 2">
                <h2>找回密码</h2>
                <p>验证码已发送至你手机</p>
                <div class="inputbox ivu-mt-16">
                    <span style="display: inline-block;padding: 4px 7px" v-width="355">{{params.mobile}}</span>
                    <a @click="step = 1">修改</a>
                </div>
                <div class="inputbox ivu-mt-16">
                    <Input v-width="255" v-model="params.code" placeholder="请输入6位短信验证码"></Input>
                    <a :disabled="disabled" @click="sendSms">{{text}}</a>
                </div>
                <Button class="ivu-mt-16" type="primary" long :disabled="disabledBut" @click="checkCode">下一步</Button>
            </div>
            <div class="page-account-containers" v-else-if="step === 3">
                <h2>设置新密码</h2>
                <p>新密码应不少于8位，包含数字、字母。</p>
                <p>且不可与之前设置过的密码重复。</p>
                <div class="inputbox ivu-mt-16">
                    <Input v-width="355" v-model="params.password" type="password" placeholder="新密码"></Input>
                </div>
                <div class="inputbox ivu-mt-16">
                    <Input v-width="255" v-model="params.confirm_password" type="password" placeholder="再次输入新密码"></Input>
                </div>
                <Button class="ivu-mt-16" type="primary" long :disabled="disabledBut" @click="ResetPassword">重置密码</Button>
            </div>
        </div>
        <div class="page-account-containers" v-else>
            <h2>设置新密码</h2>
            <p class="ivu-mt-8 ivu-mb-8 red">系统监测为默认密码，请设置新密码</p>
            <p>新密码应不少于8位，包含数字、字母。</p>
            <p>且不可与之前设置过的密码重复。</p>
            <div class="inputbox ivu-mt-16">
                <Input v-model="params.password" type="password" placeholder="新密码"></Input>
            </div>
            <div class="inputbox ivu-mt-16">
                <Input v-width="240" v-model="params.confirm_password" type="password" placeholder="再次输入新密码"></Input><span class="red">密码需包含数字、字母</span>
            </div>
            <Button class="ivu-mt-16" type="primary" long :disabled="disabledBut" @click="ResetPasswords">重置密码</Button>
        </div>
    </div>
</template>
<script>
    import { sitepasswordcheckmobile, sitesmscode, sitepasswordcheckcode, sitepasswordforgetreset, sitepasswordreset } from '@/api/register';
    export default {
        name: 'register',
        data () {
            return {
                type: 1,
                step: 1,
                disabledBut: false,
                disabled: false,
                params: { mobile: '', code: '', password: '', confirm_password: '' },
                text: '获取短信验证码'
            }
        },
        mounted () {
            this.type = +this.$route.query.type
        },
        methods: {
            enterMobile () {
                var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
                if (!myreg.test(this.params.mobile)) {
                    this.$Message.error('请输入正确的手机号')
                } else {
                    this.disabledBut = true
                    sitepasswordcheckmobile({ mobile: this.params.mobile }).then(res => {
                        this.step = 2
                        this.disabledBut = false
                    }).catch(
                        this.disabledBut = false
                    )
                }
            },
            sendSms () {
                sitesmscode({ mobile: this.params.mobile, type: this.type }).then(res => {
                    let time = res.second_time
                    let timer = setInterval(() => {
                        if (time <= 0) {
                            clearInterval(timer)
                            this.text = '重新获取短信验证码'
                            this.disabled = false
                        } else {
                            this.text = `${time}秒`
                            time--
                            this.disabled = true
                        }
                    }, 1000)
                })
            },
            checkCode () {
                this.disabledBut = true
                sitepasswordcheckcode({ mobile: this.params.mobile, code: this.params.code }).then(res => {
                    this.step = 3
                    this.disabledBut = false
                }).catch(
                    this.disabledBut = false
                )
            },
            ResetPassword () {
                this.disabledBut = true
                sitepasswordforgetreset(this.params).then(res => {
                    this.$router.replace('/login');
                    this.$Message.success('密码重置成功')
                    if (window.localStorage.getItem('loginInfo')) {
                        let obj = JSON.parse(window.localStorage.getItem('loginInfo'));
                        obj.password = ''
                        window.localStorage.setItem('loginInfo', JSON.stringify(obj))
                    }
                    this.disabledBut = false
                }).catch(
                    this.disabledBut = false
                )
            },
            ResetPasswords () {
                this.disabledBut = true
                let params = {
                    password: this.params.password, confirm_password: this.params.confirm_password
                }
                sitepasswordreset(params).then(res => {
                    this.$router.replace('/login');
                    this.$Message.success('密码重置成功')
                    // if (window.localStorage.getItem('loginInfo')) {
                    //     let obj = JSON.parse(window.localStorage.getItem('loginInfo'));
                    //     obj.password = ''
                    //     window.localStorage.setItem('loginInfo', JSON.stringify(obj))
                    // }
                    if(util.cookies.get('username')){
                        let username = util.cookies.get('username');
                        this.username = username;
                        let password= '';
                        // let enc = window.btoa(password) //编码成base64的
                        // let dec = window.atob(password) //把base64解码
                        this.password = password;
                    }
                    this.disabledBut = false
                }).catch(
                    this.disabledBut = false
                )
            }
        }
    };
</script>
<style lang="less" scoped>
.red{
    color:#ed4014
}
.disabled{
    cursor:not-allowed;
}
.page-account-containers {
    flex: 1;
    padding: 32px 0;
    width: 384px;
    margin: 0 auto;
    .inputbox{
        width: 100%;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #aaa ;
        /deep/.ivu-input{
            border-color: transparent;
            background-color: transparent;
            &:focus {
                border-color: transparent;
                outline: 0;
                box-shadow: 0 0 0
            }
        }
    }
}
</style>
